<template>
  <div class="goods">
    <div class="goods-content">
      <div class="title">全部商品</div>
      <div class="operation-box">
        <el-button type="success" :icon="Plus" @click="add_goods"
          >添加商品</el-button
        >
        <el-button type="primary" :icon="Refresh" @click="table_reload"
          >刷新</el-button
        >
        <el-button
          type="danger"
          v-if="table_data_origin && table_data_origin.length > 0"
          :icon="Download"
          @click="export_excel(table_data_origin, '全部商品')"
          >导出数据</el-button
        >

        <el-input
          v-model="search_goods_name"
          class="w-50 m-2"
          size="default"
          style="width: 180px; margin: 0 10px 0 30px"
          clearable
          :prefix-icon="Search"
          @input="search_filter"
          placeholder="输入商品名称搜索"
        />

        <el-button type="default" @click="search_reset">重置</el-button>
      </div>

      <section class="table-data-box" v-if="table_data">
        <el-table
          :data="table_data"
          v-loading="table_loading"
          table-layout="fixed"
          style="width: 95%; margin: 0 auto"
        >
          <el-table-column type="expand">
            <template #default="props">
              <div m="4" style="width: 95%; margin: 0 auto">
                <p m="t-0 b-2">颜色: {{ props.row.color }}</p>
                <p m="t-0 b-2">尺寸: {{ props.row.size }}</p>
                <p m="t-0 b-2">月售: {{ props.row.monthly_sale }}</p>

                <!-- <p m="t-0 b-2">重量: {{ props.row.weight }}</p> -->
                <!-- <p m="t-0 b-2">储存方式: {{ props.row.storage_method }}</p> -->
                <p m="t-0 b-2">好评度: {{ props.row.degree_of_praise }}</p>
                <p m="t-0 b-2">描述: {{ props.row.goods_desc }}</p>

                <h3>评价详情</h3>
                <el-table :data="props.row.evaluate" table-layout="auto" border>
                  <el-table-column label="评价日期" prop="date" />
                  <el-table-column label="昵称" prop="user_name" />
                  <el-table-column label="评价内容" prop="content" />
                  <el-table-column label="是否点赞">
                    <template #default="scope">
                      <div style="display: flex; align-items: center">
                        <el-switch
                          v-model="scope.row.goods_like"
                          disabled
                          active-text="已赞"
                          inactive-text="未赞"
                          class="ml-2"
                          style="--el-switch-on-color: #13ce66"
                        />
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>

          <!-- <el-table-column label="生产日期" prop="date" /> -->
          <el-table-column label="商品名称" prop="goods_name"  width="450"/>
          <el-table-column label="商品id" prop="goods_id" />
          <el-table-column label="封面" width="150">
            <template #default="scope">
              <div>
                <!-- <img
                :src="scope.row.cover"
                style="width: 90px"
                alt=""
              /> -->
                <div class="demo-image__preview">
                  <div class="demo-image__error">
                    <el-image
                      style="width: 60px; height: 60px"
                      :src="scope.row.cover"
                      :zoom-rate="2"
                      :max-scale="7"
                      lazy
                      hide-on-click-modal
                      :min-scale="0.2"
                      :preview-src-list="[scope.row.cover]"
                      :initial-index="0"
                      fit="cover"
                    >
                      <template #error>
                        <div class="image-slot">
                          <el-icon><icon-picture /></el-icon>
                        </div>
                      </template>
                    </el-image>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="成本" width="100">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                {{ scope.row.cost }}元
              </div>
            </template>
          </el-table-column>
          <el-table-column label="售价" width="100">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                {{ scope.row.price }}元
              </div>
            </template>
          </el-table-column>
          <el-table-column label="原价" width="100">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                {{ scope.row.origin_price }}元
              </div>
            </template>
          </el-table-column>
          <el-table-column label="库存" width="100">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span :style="{ color: scope.row.stock < 20 ? 'red' : '' }">{{
                  scope.row.stock
                }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="是否上架">
            <template #default="scope">
              <div>
                <el-switch
                  v-model="scope.row.shelf_flag"
                  :active-value="1"
                  :inactive-value="0"
                  disabled
                  class="ml-2"
                  style="--el-switch-on-color: #13ce66"
                />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="是否爆品">
            <template #default="scope">
              <div>
                <el-switch
                  v-model="scope.row.hot"
                  :active-value="1"
                  :inactive-value="0"
                  disabled
                  class="ml-2"
                  style="--el-switch-on-color: #13ce66"
                />
              </div>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="large"
                @click="before_handle_edit(scope.$index, scope.row)"
                >编辑</el-button
              >

              <el-popconfirm
                confirm-button-text="是"
                cancel-button-text="否"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="是否确定删除"
                @confirm="handle_delete(scope.$index, scope.row)"
                @cancel="cancelEvent"
              >
                <template #reference>
                  <el-button link size="large" type="danger" style="color: red"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </section>

      <!-- 编辑&新增 角色信息窗口 -->
      <el-drawer v-model="show_info" :direction="direction">
        <template #header>
          <h4 style="text-align: left">
            {{
              show_info == "edit"
                ? "编辑商品"
                : show_info == "new"
                ? "添加商品"
                : ""
            }}
          </h4>
        </template>
        <template #default>
          <div>
            <el-form
              label-position="left"
              label-width="100px"
              v-if="show_info == 'edit'"
              :model="edit_info"
              style="max-width: 460px"
            >
              <el-form-item label="商品名称">
                <el-input
                  placeholder="请输入商品名称"
                  clearable
                  v-model="edit_info.goods_name"
                />
              </el-form-item>
              <el-form-item label="库存">
                <el-input-number v-model="edit_info.stock" step-strictly />
              </el-form-item>
              <el-form-item label="成本">
                <el-input-number v-model="edit_info.cost" />
              </el-form-item>
              <el-form-item label="售价">
                <el-input-number v-model="edit_info.price" />
              </el-form-item>
              <el-form-item label="原价">
                <el-input-number v-model="edit_info.origin_price" />
              </el-form-item>
              <el-form-item label="颜色">
                <el-input
                  placeholder="请输入颜色"
                  clearable
                  v-model="edit_info.color"
                />
              </el-form-item>
              <!-- <el-form-item label="尺寸">
                <el-input
                  placeholder="请输入尺寸"
                  clearable
                  v-model="edit_info.size"
                />
              </el-form-item> -->

              <el-form-item label="货号">
                <el-input
                  placeholder="请输入货号"
                  clearable
                  v-model="edit_info.item_number"
                />
              </el-form-item>

              <!-- <el-form-item label="缺货尺寸">
                <el-input
                  placeholder="请输入尺寸（英文逗号隔开）"
                  clearable
                  v-model="edit_info.stock_out_size"
                />
              </el-form-item> -->

              <!-- <el-form-item label="描述">
                <el-input
                  placeholder="请输入描述"
                  clearable
                  v-model="edit_info.goods_desc"
                />
              </el-form-item> -->

              <el-form-item label="所属分类">
                <el-cascader
                  v-model="menu_ids"
                  :options="menu_ids_options" 
                  :props="props"
                  placeholder="请选择所属分类"
                  @change="handleMenuIdsChange"
                />
              </el-form-item>

              <el-form-item label="供货商">
                <el-input
                  placeholder="请输入"
                  clearable
                  v-model="edit_info.supplier"
                />
              </el-form-item>

              <el-form-item label="月售">
                <el-input-number
                  v-model="edit_info.monthly_sale"
                  disabled
                  step-strictly
                />
              </el-form-item>
              <!-- <el-form-item label="重量">
                <el-input
                  placeholder="请输入重量"
                  clearable
                  v-model="edit_info.weight"
                />
              </el-form-item>
              <el-form-item label="储存方式">
                <el-input
                  placeholder="请输入储存方式"
                  clearable
                  v-model="edit_info.storage_method"
                />
              </el-form-item> -->
              <el-form-item label="是否推荐">
                <el-switch
                  v-model="edit_info.suggest"
                  class="ml-2"
                  :active-value="1"
                  :inactive-value="0"
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #707070;
                  "
                />
              </el-form-item>
              <el-form-item label="是否上架">
                <el-switch
                  v-model="edit_info.shelf_flag"
                  class="ml-2"
                  :active-value="1"
                  :inactive-value="0"
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #707070;
                  "
                />
              </el-form-item>
              <el-form-item label="爆品">
                <el-switch
                  v-model="edit_info.hot"
                  class="ml-2"
                  :active-value="1"
                  :inactive-value="0"
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #707070;
                  "
                />
              </el-form-item>

              <el-form-item label="商品封面">
                <el-upload
                  class="avatar-uploader"
                  action=""
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="edit_info.cover"
                    :src="edit_info.cover"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon"
                    ><Plus
                  /></el-icon>
                </el-upload>
              </el-form-item>
            </el-form>

            <el-form
              label-position="left"
              label-width="100px"
              v-if="show_info == 'new'"
              :model="new_info"
              style="max-width: 460px"
            >
              <el-form-item label="商品名称">
                <el-input
                  placeholder="请输入商品名称"
                  clearable
                  v-model="new_info.goods_name"
                />
              </el-form-item>
              <el-form-item label="库存">
                <el-input-number v-model="new_info.stock" step-strictly />
              </el-form-item>
              <el-form-item label="成本">
                <el-input-number v-model="new_info.cost" />
              </el-form-item>
              <el-form-item label="售价">
                <el-input-number v-model="new_info.price" />
              </el-form-item>
              <el-form-item label="原价">
                <el-input-number v-model="new_info.origin_price" />
              </el-form-item>
              <el-form-item label="颜色">
                <el-input
                  placeholder="请输入颜色"
                  clearable
                  v-model="new_info.color"
                />
              </el-form-item>
              <!-- <el-form-item label="尺寸">
                <el-input
                  placeholder="请输入尺寸"
                  clearable
                  v-model="new_info.size"
                />
              </el-form-item> -->
              <el-form-item label="货号">
                <el-input
                  placeholder="请输入货号"
                  clearable
                  v-model="new_info.item_number"
                />
              </el-form-item>
              <!-- <el-form-item label="缺货尺寸">
                <el-input
                  placeholder="请输入尺寸"
                  clearable
                  v-model="new_info.stock_out_size"
                />
              </el-form-item> -->
              <!-- <el-form-item label="描述">
                <el-input
                  placeholder="请输入描述"
                  clearable
                  v-model="new_info.goods_desc"
                />
              </el-form-item> -->

              <el-form-item label="所属分类">
                <el-cascader
                  v-model="menu_ids"
                  :options="menu_ids_options" 
                  :props="props"
                  placeholder="请选择所属分类"
                  @change="handleMenuIdsChange"
                />
              </el-form-item>


              <el-form-item label="供货商">
                <el-input
                  placeholder="请输入"
                  clearable
                  v-model="new_info.supplier"
                />
              </el-form-item>

              <el-form-item label="月售">
                <el-input-number v-model="new_info.monthly_sale" disabled />
              </el-form-item>
              <!-- <el-form-item label="重量">
                <el-input
                  placeholder="请输入重量"
                  clearable
                  v-model="new_info.weight"
                />
              </el-form-item> -->
              <!-- <el-form-item label="储存方式">
                <el-input
                  placeholder="请输入储存方式"
                  clearable
                  v-model="new_info.storage_method"
                />
              </el-form-item> -->
              <el-form-item label="是否推荐">
                <el-switch
                  v-model="new_info.suggest"
                  class="ml-2"
                  :active-value="1"
                  :inactive-value="0"
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #707070;
                  "
                />
              </el-form-item>
              <el-form-item label="是否上架">
                <el-switch
                  v-model="new_info.shelf_flag"
                  class="ml-2"
                  :active-value="1"
                  :inactive-value="0"
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #707070;
                  "
                />
              </el-form-item>
              <el-form-item label="爆品">
                <el-switch
                  v-model="new_info.hot"
                  class="ml-2"
                  :active-value="1"
                  :inactive-value="0"
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #707070;
                  "
                />
              </el-form-item>

              <el-form-item label="商品封面">
                <el-upload
                  class="avatar-uploader"
                  action=""
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="new_info.cover"
                    :src="new_info.cover"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon"
                    ><Plus
                  /></el-icon>
                </el-upload>
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template #footer>
          <div style="flex: auto">
            <el-button @click="show_info = false">取消</el-button>
            <el-button
              type="primary"
              @click="handle_commit"
              v-loading.fullscreen.lock="global_loading"
              >提交</el-button
            >
          </div>
        </template>
      </el-drawer>
    </div>
    <el-pagination
      v-model:currentPage="current_page" 
      v-model:page-size="page_size"
      :page-sizes="[10,15, 20, 50]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      style="
        display: flex;
        justify-content: flex-start;
        margin-top: 20px;
        margin-left: 2.5%;
      "
      :total="pagination_total"
      @size-change="handleSizeChange"  
      @current-change="pageChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import {
  Refresh,
  Download,
  Search,
  Timer,
  Plus,
  Picture as IconPicture,
} from "@element-plus/icons-vue";
import { export_excel } from "../../../common/utils";
import { ElMessage, UploadProps } from "element-plus";
import {
  addGoods,
  getGoods,
  updateGoods,
  delGoods,
} from "../../ajaxServices/goods";

import { data } from "./data.js"
// interface Goods {
//   //   date: string; // 生产日期
//   goods_id: number; // 商品id
//   goods_name: string; // 商品名称
//   stock: number; // 商品库存
//   cost: number; // 成本
//   price: number; // 售价
//   spec: string; // 规格
//   goods_desc: string; // 描述
//   monthly_sale: number; // 月售
//   cover: string; // 商品图片
//   hot: number; // 爆品
//   weight: string; // 重量
//   storage_method: string; // 储存方式
//   degree_of_praise: string; // 好评度
//   shelf_flag: number; // 是否上架
//   evaluate: any; // 评价详情
// }

const parentBorder = ref(false);
const childBorder = ref(false);

const table_data_origin = ref([]);

// const table_data = ref<Goods>(table_data_origin);
const table_data = ref([]);

const table_loading = ref(false);
const search_goods_name = ref("");
const current_page = ref(1); // 当前页码
const page_size = ref(10); // 每页条数
const pagination_total = ref(1); // 页码总条数

const props = { expandTrigger: 'hover'} // 所属分类鼠标划入自动展示第二级联内容
const table_svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

const menu_ids = ref([]);
const menu_ids_options = data;
const handleMenuIdsChange = (val:any) => {
  menu_ids.value = val
}


const search_filter = () => {
  if (search_goods_name.value == "") {
    table_data.value = table_data_origin.value
    return;
  }

  if (search_goods_name.value != "") {
    table_data.value = table_data_origin.value ? table_data_origin.value.filter((data: any) =>
      data.goods_name
        .toLowerCase()
        .includes(search_goods_name.value.toLowerCase())
    ) : []
  }
};

// 重置搜索框
const search_reset = () => {
  search_goods_name.value = "";
  table_data.value = table_data_origin.value || [];
};



// 刷新表格数据
const table_reload = () => {
  table_loading.value = true;
  let reqData = {
    page_size: page_size.value,
    page_count: current_page.value,
  };

  getGoods(reqData)
    .then((res: any) => {
      res.data.map((_:any) => {
        _.menu_ids = [_.menu_first_id, _.menu_second_id]
      })
      table_loading.value = false;
      table_data_origin.value = res.data || [];
      table_data.value = res.data || [];
      pagination_total.value = res.total || 1;
    })
    .catch(() => {
      table_loading.value = false;
    });
};
table_reload();

// 分页器相关
const handleSizeChange = (val:any) => {
  page_size.value = val
  table_reload();
}


const pageChange = (val:any) => {
  current_page.value = val
  table_reload();
}

/*
    删除商品相关
*/
const handle_delete = (index: number, row: any) => {
  if (!row.goods_id || row.goods_id == "") {
    ElMessage({ message: "商品id不能为空", type: "warning" });
    return;
  }
  table_loading.value = true;
  delGoods({ goods_id: row.goods_id || "" })
    .then((res: any) => {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      // 重新加载表单数据
      table_reload();
    })
    .catch(() => {
      table_loading.value = false;
    });
};

/*
    新增&编辑商品相关
*/
const show_info = ref(false);
const edit_info = ref(null); // 编辑商品表单
const global_loading = ref(false); // 表单提交按钮loading状态
const new_info = ref({
  // 新增商品表单
  goods_id: 0, // 商品id
  goods_name: "", // 商品名称
  stock: 1, // 商品库存
  cost: 0, // 商品成本
  price: 0, // 商品单价
  origin_price: 0, // 商品原价
  color: "", // 商品颜色
  size: "", // 商品尺寸
  item_number: "",
  cover: "", // 商品图片
  hot: 0, // 是否爆品 1：爆品  0：不是爆品
  suggest: 0, // 是否推荐
  degree_of_praise: "", // 好评度
  shelf_flag: 0, // 是否上架 0：下架  1： 上架
  quantity_sold: 0, // 已售
  monthly_sale: 0, // 月售
});
const before_handle_edit = (index: number, row: Goods) => {
  edit_info.value = row;
  menu_ids.value = row.menu_ids;
  show_info.value = "edit";
  console.log(index, row);
};

const imageUrl = ref("");

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response: any,
  uploadFile: any
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile: any) => {
  //   if (rawFile.type !== "image/jpeg") {
  //     ElMessage.error("Avatar picture must be JPG format!");
  //     return false;
  //   } else if (rawFile.size / 1024 / 1024 > 2) {
  //     ElMessage.error("Avatar picture size can not exceed 2MB!");
  //     return false;
  //   }
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大小不得超过2MB");
    return false;
  }
  return true;
};

const add_goods = () => {
  // 添加商品重置商品数据
  new_info.value = {
    // 新增商品表单
    goods_id: 0, // 商品id
    goods_name: "", // 商品名称
    stock: 1, // 商品库存
    cost: 0, // 商品成本
    price: 0, // 商品单价
    origin_price: 0, // 商品原价
    color: "", 
    size: "", // 商品尺寸
    item_number: "",
    cover: "", // 商品图片
    hot: 0, // 是否爆品 1：爆品  0：不是爆品
    degree_of_praise: "", // 好评度
    suggest: 0, // 是否推荐
    shelf_flag: 0, // 是否上架 0：下架  1： 上架
    quantity_sold: 0, // 已售
    monthly_sale: 0, // 月售
    supplier: ""
  };
  menu_ids.value = [];
  show_info.value = "new";
};

const handle_commit = () => {
  // 编辑修改
  if (show_info.value == "edit") {
    if (!edit_info.value.goods_name || edit_info.value.goods_name == "") {
      ElMessage({ message: "商品名称不能为空", type: "warning" });
      return;
    }
    if (!edit_info.value.stock || edit_info.value.stock == "") {
      ElMessage({ message: "库存不能为空", type: "warning" });
      return;
    }
    // if (!edit_info.value.cost || edit_info.value.cost == "") {
    //  ElMessage({ message: "成本不能为空", type: "warning" });
    //  return;
    // }
    if (!edit_info.value.price || edit_info.value.price == "") {
      ElMessage({ message: "售价不能为空", type: "warning" });
      return;
    }

    if(menu_ids.value.length <= 0) {
      ElMessage({ message: "请选择商品所属分类", type: "warning" });
      return;
    }

    if(edit_info.value.color == "") {
      ElMessage({ message: "颜色配置不能为空", type: "warning" });
      return;
    }

    // if(edit_info.value.size == "") {
    //   ElMessage({ message: "尺寸配置不能为空", type: "warning" });
    //   return;
    // }

    if(edit_info.value.item_number == "") {
      ElMessage({ message: "货号不能为空", type: "warning" });
      return;
    }

    let reqData = {
      goods_id: edit_info.value.goods_id || "", // 商品id
      goods_name: edit_info.value.goods_name || "", // 商品名称
      stock: edit_info.value.stock || 0, // 商品库存
      cost: edit_info.value.cost || 0, // 商品成本
      price: edit_info.value.price || 0, // 商品单价
      origin_price: edit_info.value.origin_price || 0,  // 商品原价
      color: edit_info.value.color || "", // 商品颜色
      size: edit_info.value.size || "", // 商品尺寸
      item_number: edit_info.value.item_number || "",
      menu_first_id: menu_ids.value[0] || "",
      menu_second_id: menu_ids.value[1] || "",
      cover: edit_info.value.cover || "", // 商品图片
      suggest: edit_info.value.suggest || 0, // 是否推荐
      hot: edit_info.value.hot || 0, // 是否爆品 1：爆品  0：不是爆品
      degree_of_praise: edit_info.value.degree_of_praise || "", // 好评度
      shelf_flag: edit_info.value.shelf_flag || 0, // 是否上架 0：下架  1： 上架
      item_number: edit_info.value.item_number || "",
      supplier: edit_info.value.supplier || ""
      // quantity_sold: edit_info.value.quantity_sold || 0, // 已售

    };
    global_loading.value = true;
    updateGoods(reqData)
      .then((res: any) => {
        global_loading.value = false;
        show_info.value = false;
        ElMessage({
          message: "修改成功",
          type: "success",
        });
        // 重新加载表单数据
        table_reload();
      })
      .catch(() => {
        global_loading.value = false;
      });
    return;
  }

  // 新增
  if (show_info.value == "new") {
    if (!new_info.value.goods_name || new_info.value.goods_name == "") {
      ElMessage({ message: "商品名称不能为空", type: "warning" });
      return;
    }
    if (!new_info.value.stock || new_info.value.stock == "") {
      ElMessage({ message: "库存不能为空", type: "warning" });
      return;
    }
    // if (!new_info.value.cost || new_info.value.cost == "") {
    //  ElMessage({ message: "成本不能为空", type: "warning" });
    //  return;
    // }
    if (!new_info.value.price || new_info.value.price == "") {
      ElMessage({ message: "售价不能为空", type: "warning" });
      return;
    }
    if(menu_ids.value.length <= 0) {
      ElMessage({ message: "请选择商品所属分类", type: "warning" });
      return;
    }

    if(new_info.value.color == "") {
      ElMessage({ message: "颜色配置不能为空", type: "warning" });
      return;
    }

    // if(new_info.value.size == "") {
    //   ElMessage({ message: "尺寸配置不能为空", type: "warning" });
    //   return;
    // }

    if(new_info.value.item_number == "") {
      ElMessage({ message: "货号不能为空", type: "warning" });
      return;
    }


    let reqData = {
      goods_id: 0, // 商品id
      goods_name: new_info.value.goods_name || "", // 商品名称
      stock: new_info.value.stock || 0, // 商品库存
      cost: new_info.value.cost || 0, // 商品成本
      price: new_info.value.price || 0, // 商品单价
      origin_price: new_info.value.origin_price || 0, // 商品原价
      color: new_info.value.color || "", // 商品颜色
      size: new_info.value.size || "", // 商品尺寸
      menu_first_id: menu_ids.value[0] || "",
      menu_second_id: menu_ids.value[1] || "",
      cover: new_info.value.cover || "", // 商品图片
      suggest: new_info.value.suggest || 0, // 是否推荐
      hot: new_info.value.hot || 0, // 是否爆品 1：爆品  0：不是爆品
      degree_of_praise: new_info.value.degree_of_praise || "", // 好评度
      shelf_flag: new_info.value.shelf_flag || 0, // 是否上架 0：下架  1： 上架
      item_number: new_info.value.item_number || "",
      supplier: new_info.value.supplier || ""
      // quantity_sold: new_info.value.quantity_sold || 0, // 已售

    };
    global_loading.value = true;
    addGoods(reqData)
      .then((res: any) => {
        global_loading.value = false;
        show_info.value = false;
        ElMessage({
          message: "添加成功",
          type: "success",
        });
        // 重新加载表单数据
        table_reload();
      })
      .catch(() => {
        global_loading.value = false;
      });
  }
};
</script>


<style scoped lang="scss">
.goods {
  max-height: calc(100vh - 180px);
  overflow-y: scroll;
  .goods-content {
    width: 95%;
    height: 80%;
    border: 1px solid #eee;
    border-radius: 5px;
    margin: auto;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);

    .title {
      width: 100%;
      height: 55px;
      font-size: 18px;
      color: #000;
      text-align: left;
      line-height: 55px;
      text-indent: 20px;
      border-bottom: 1px solid #eee;
    }

    .operation-box {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      padding-left: 20px;
    }
  }
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .demo-image__error .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }
  .demo-image__error .el-image {
    max-width: 300px;
    max-height: 200px;
    width: 100%;
  }

  .demo-image__error .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
  }
  .demo-image__error .image-slot .el-icon {
    font-size: 30px;
  }
}
</style>

<style>
.el-dialog__header,
.el-dialog__body {
  text-align: left;
}
.el-table__cell {
  position: static !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.el-drawer__header {
  margin-bottom: 0;
}
</style>






